<template>
  <el-autocomplete
      placeholder="搜索城市"
      :fetch-suggestions="querySearchAsync"
      v-model="queryStr"
      @select="emitEvent($event)">
  </el-autocomplete>
</template>

<script setup>
import axios from "~/config/axios";
import {ref} from "vue";

const queryStr = ref('')
const querySearchAsync = (queryStr, cb) => {

  axios
      .get("/city", {params: {cityQueryStr: queryStr}})
      .then((data) => {
        for (let index = 0; index < data.length; index++) {
          const element = data[index];
          element.value = element.provinceName + "-" + element.cityName;
        }
        cb(data);
      });
}
const emit = defineEmits(['select'])
// 由于el-autocomplete也有select事件，不能使用@select="$emit('select',$value)" 的用法
const emitEvent=(event)=>{
  emit('select',event)
}



</script>

<style scoped>

</style>